<html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付中心</title>
    <style>
        body * {
            /* box-sizing: border-box; */
            flex-shrink: 0;
        }

        body {
            font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
                Arial, PingFang SC-Light, Microsoft YaHei;
            margin: 0;
            padding: 0;
            background: #f5f6f7;
        }

        input {
            background-color: transparent;
            border: 0;
        }

        button {
            margin: 0;
            padding: 0;
            border: 1px solid transparent;
            outline: none;
            background-color: transparent;
        }

        button:active {
            opacity: 0.6;
        }

        .flex-col {
            display: flex;
            flex-direction: column;
        }

        .flex-row {
            display: flex;
            flex-direction: row;
        }

        .justify-start {
            display: flex;
            justify-content: flex-start;
        }

        .justify-center {
            display: flex;
            justify-content: center;
        }

        .justify-end {
            display: flex;
            justify-content: flex-end;
        }

        .justify-evenly {
            display: flex;
            justify-content: space-evenly;
        }

        .justify-around {
            display: flex;
            justify-content: space-around;
        }

        .justify-between {
            display: flex;
            justify-content: space-between;
        }

        .align-start {
            display: flex;
            align-items: flex-start;
        }

        .align-center {
            display: flex;
            align-items: center;
        }

        .align-end {
            display: flex;
            align-items: flex-end;
        }

        html {
            font-size: 4vw;
        }

        .page {
            background-color: rgba(245, 246, 247, 1);
            position: relative;
            /* width: 23.438rem; */
            /* height: 50.75rem; */
            /* height: 100vh; */
            overflow: hidden;
        }

        .section_1 {
            background-color: rgba(255, 255, 255, 1);
            /* width: 23.438rem; */
            /* height: 5.5rem; */
        }

        .group_1 {
            width: 20.375rem;
            height: 1.313rem;
            margin: 0.875rem 0 0 1.5rem;
        }

        .text_1 {
            width: 1.688rem;
            height: 1.313rem;
            overflow-wrap: break-word;
            color: rgba(0, 0, 0, 1);
            font-size: 0.937rem;
            letter-spacing: -0.30000001192092896px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            line-height: 1.313rem;
        }

        .thumbnail_1 {
            width: 1.063rem;
            height: 0.688rem;
            margin: 0.188rem 0 0 14.563rem;
        }

        .thumbnail_2 {
            width: 0.938rem;
            height: 0.688rem;
            margin: 0.188rem 0 0 0.313rem;
        }

        .image_1 {
            width: 1.5rem;
            height: 0.688rem;
            margin: 0.188rem 0 0 0.313rem;
        }

        .nav-bar_1 {
            width: 23.438rem;
            height: 3.188rem;
            margin: 0.188rem 0 0.063rem 0;
        }

        .icon_1 {
            width: 0.438rem;
            height: 0.875rem;
            margin: 1.313rem 0 0 1.063rem;
        }

        .text_2 {
            width: 4.75rem;
            height: 1.563rem;
            overflow-wrap: break-word;
            color: rgba(0, 1, 2, 1);
            font-size: 1.125rem;
            letter-spacing: 1.125px;
            font-family: AlibabaPuHuiTiM;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.563rem;
            margin: 1rem 0 0 7.875rem;
        }

        .applet-top-bar_1 {
            width: 5.438rem;
            height: 2rem;
            margin: 0.75rem 0.375rem 0 3.5rem;
        }

        /* .section_2 {
            width: 23.438rem;
            height: 45.313rem;
            margin-bottom: 0.063rem;
        } */

        .box_1 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 12px;
            height: 6.125rem;
            margin: auto;
            margin-top: 9rem;
            /* width: 21.438rem; */
            /* margin: 1.25rem 0 0 1rem; */
        }

        .group_2 {
            background-color: rgba(255, 244, 203, 1);
            border-radius: 12px;
            position: relative;
            width: 21.438rem;
            height: 6.125rem;
        }

        .text_3 {
            width: 3.688rem;
            height: 1.25rem;
            overflow-wrap: break-word;
            color: rgba(0, 1, 2, 1);
            font-size: 0.875rem;
            letter-spacing: 0.875px;
            font-family: AlibabaPuHuiTiM;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.25rem;
            margin: 0.688rem 0 0 1rem;
        }

        .text-wrapper_1 {
            width: 2.75rem;
            height: 1.375rem;
            overflow-wrap: break-word;
            font-size: 0;
            letter-spacing: 1px;
            font-family: AlibabaPuHuiTiM;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.063rem;
            margin: 0.625rem 1rem 0 0;
        }

        .text_4 {
            width: 2.75rem;
            height: 1.375rem;
            overflow-wrap: break-word;
            color: rgba(255, 52, 52, 1);
            font-size: 0.75rem;
            font-family: AlibabaPuHuiTiM;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.063rem;
        }

        .text_5 {
            width: 2.75rem;
            height: 1.375rem;
            overflow-wrap: break-word;
            color: rgba(255, 52, 52, 1);
            font-size: 1rem;
            font-family: AlibabaPuHuiTiM;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.063rem;
        }

        .group_3 {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 12px;
            position: absolute;
            left: 0;
            top: 2.625rem;
            width: 21.438rem;
            height: 5.5rem;
        }

        .image-text_1 {
            width: 7.313rem;
            height: 2.188rem;
            margin: 1.688rem 0 0 1.063rem;
        }

        .icon_2 {
            width: 2.25rem;
            height: 2.188rem;
        }

        .text-group_1 {
            width: 4.313rem;
            height: 1.375rem;
            overflow-wrap: break-word;
            color: rgba(52, 52, 52, 1);
            font-size: 1rem;
            letter-spacing: 1.3333333730697632px;
            font-family: AlibabaPuHuiTiM;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.375rem;
            margin-top: 0.375rem;
        }

        .icon_3 {
            width: 1.25rem;
            height: 1.25rem;
            margin: 2.125rem 1rem 0 10.813rem;
        }

        .image-text_2 {
            width: 11.25rem;
            height: 1.25rem;
            margin: 2.75rem 0 0 1.375rem;
        }

        .checkbox_1 {
            width: 1rem;
            height: 1rem;
            margin-top: 0.125rem;
        }

        .text-group_2 {
            width: 9.875rem;
            height: 1.25rem;
            overflow-wrap: break-word;
            color: rgba(132, 135, 141, 1);
            font-size: 0.875rem;
            letter-spacing: 0.5px;
            font-family: AlibabaPuHuiTiR;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.25rem;
        }

        .button_1 {
            background-color: rgba(255, 198, 0, 1);
            border-radius: 22px;
            height: 2.5rem;
            width: 17rem;
            margin: auto;
            margin-top: 6.5rem;
            /* margin: 2.5rem 0 28.938rem 3.25rem; */
        }

        .text_6 {
            width: 4.125rem;
            height: 1.375rem;
            overflow-wrap: break-word;
            color: rgba(0, 1, 2, 1);
            font-size: 1rem;
            letter-spacing: 0.5714285969734192px;
            font-family: AlibabaPuHuiTiM;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 1.375rem;
            margin: 0.563rem 0 0 6.438rem;
        }

        /* 延迟动画样式 */
        .loading-animation {
            display: none;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #fff;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
        }

        .loader {
            border: 16px solid #f3f3f3;
            border-top: 16px solid #e1e1e1;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="page flex-col">
        <div class="section_1 flex-col">
            <div class="nav-bar_1 flex-row">
                <img class="icon_1" referrerpolicy="no-referrer" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngad52a06835f2fac930b390f34fa88bf079216c5da98d403929971f438b35113c">
                <!-- <span class="text_2">在线支付</span> -->
            </div>
        </div>
        <div class="section_2 flex-col">
            <div class="box_1 flex-col">
                <div class="group_2 flex-row justify-between">
                    <span class="text_3">订单总价</span>
                    <div class="text-wrapper_1">
                        <span class="text_4">¥</span> <span class="text_5">%s</span>
                    </div>
                    <div class="group_3 flex-row">
                        <div class="image-text_1 flex-row justify-between">
                            <img class="icon_2" referrerpolicy="no-referrer" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc7b1ce1dca300bbcec4444630a6b983fc4038728118572988094352a751be723">
                            <span class="text-group_1">账户中心</span>
                        </div>
                        <img class="icon_3" referrerpolicy="no-referrer" src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng198fd8687cfc267fb1c648c1966017373b56888fd5c1511a14fc125cbbb764d5">
                    </div>
                </div>
            </div>

            <button class="button_1 flex-col">
                <span class="text_6">确认支付</span>
            </button>
        </div>
        <div class="loading-animation">
            <div class="loader"></div>
        </div>
    </div>

    <script>
        // 获取完整的 URL，使用 URLSearchParams 对象解析 URL 查询参数
        var urlParams = new URLSearchParams(window.location.search);
        console.log(urlParams);
        
        var orderNumber = urlParams.get("o");
        var paymentAmount = urlParams.get("m");
        var randomString = urlParams.get('n');
        var timestamp = urlParams.get('t');
        var price = document.querySelector('.text_5')
        price.innerHTML = paymentAmount;

        //支付操作
        var payButton = document.querySelector('.button_1')
        payButton.addEventListener('click', function () {
            var xhr = new XMLHttpRequest();
            var url = "/admin/v1.0/api/open/jd/cashier/pay";
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求成功处理响应数据
                    var response = JSON.parse(xhr.responseText);
                    console.log(response);
                    if (response.errCode == 100000) {
                        var uid = response.data.uid;
                        var paymentAmount = response.data.amount;
                        setTimeout(function () {
                            // window.open('./finish.html', "_blank")
                            window.location.href = './finish.html?uid='+ uid + '&price=' + paymentAmount;
                        }, 500);
                    } else {
                        alert(response.errMsg)
                    }
                }
                else {
                    // setTimeout(function () {
                    //     // window.open('./finish.html', "_blank")
                    //     window.location.href = './finish.html?uid='+'3' + '&price=' + '10';
                    // }, 500);
                }
            };

            // 构建要发送的数据
            var data = {
                o: orderNumber,
                n: randomString,
                t: timestamp
            };

            // 将数据转化为 JSON 字符串
            var jsonData = JSON.stringify(data);

            // 发送请求
            xhr.send(jsonData);
        });

    </script>


</body></html>